<template>
	<view style="c-box">
		<form @submit="formSubmit" @reset="formReset">
			 <view class="uni-flex uni-row">
				<view class="flex-item title">专案名称:</view>
				<view class="flex-item val-center">
					{{form.name}}
				</view>
			</view>
			<view class="uni-flex uni-row">
				<view class="flex-item title">专案代码:</view>
				<view class="flex-item">{{form.encoded}}</view>
				<view class="flex-item title" style="margin-left: 20rpx;">客户:</view>
				<view class="flex-item">{{form.customer}}</view>
			</view>
			<view class="uni-flex uni-row">
				<view class="flex-item title">时间:</view>
				<view class="flex-item">
					<span>{{form.startTime?form.startTime:''}}</span>~<span>{{form.endTime?form.endTime:''}}</span>
				</view>
			</view>
			<view class="uni-flex uni-row">
				<view class="flex-item title">机构负责人:</view>
				<view class="flex-item">{{pics[form.mechPic]?pics[form.mechPic]:''}}</view>
				<view class="flex-item title" style="margin-left: 20rpx;">电控负责人:</view>
				<view class="flex-item">{{pics[form.elecPic]?pics[form.elecPic]:''}}</view>
			</view>
			
<!-- 			 <view class="uni-flex uni-row">
				<view class="flex-item title">专案代码:</view>
				<view class="flex-item">
					<input disabled type="text" v-model="form.encoded" class="uni-input" placeholder="专案代码" />
				</view>
			</view>
			<view class="uni-flex uni-row">
				<view class="flex-item title">客户:</view>
				<view class="flex-item">
					<input disabled type="text" v-model="form.customer" class="uni-input" placeholder="客户" />
				</view>
			</view> -->

<!-- 			<view class="uni-list-cell">
				<view class="uni-list-cell-left title">
					机构负责人:
				</view>
				<view class="uni-list-cell-db">
					<picker disabled @change="bindMechChange" :value="form.mechPic" :range="pics">
						<view class="uni-input">{{pics[form.mechPic]}}</view>
					</picker>
				</view>
			</view>
			<view class="uni-list-cell">
			<view class="uni-list-cell-left title">
					电控负责人:
				</view>
				<view class="uni-list-cell-db">
					<picker disabled @change="bindMechChange" :value="form.mechPic" :range="pics">
						<view class="uni-input">{{pics[form.elecPic]}}</view>
					</picker>
				</view>
			</view> -->
				<view class="content">
					<view class="tabs">
					  <view v-for="(tab, index) in tabs" class="tab-item" :class="current==index&&'active'" @click="onChange(index)">
					  {{tab.title}}
					  </view>
					</view>
					<view v-show="current==0" class="xxx">
					  <view class="uni-form-item uni-column">
						<view class="a-box">
							<textarea class="t-area" maxlength="-1"  v-model="form.mechGress"  placeholder="请输入机构进度"/>
						</view>
						<view class="title e-box">
							<button @click="saveProgress(1,form.mechGress)" style="margin: 0 20rpx;" class="mini-btn" type="primary" size="mini">保存</button>
						</view>	
					  </view>
					  <view class="title">
					  	更新记录：
					  </view>
					  <block v-for="(item,index) in mList" :key="index">
					  	<view class="h-l-time">
					  		{{item.createtime}}
					  	</view>
					  	<view class="h-l-note">
					  		{{item.remark}}
					  	</view>
					  </block>
					</view>
					<view v-show="current==1"  class="xxx">
					  <view class="uni-form-item uni-column">
						<view class="a-box">
							<textarea class="t-area" maxlength="-1"  v-model="form.elecGress"  placeholder="请输入电控进度"/>
						</view>
						<view class="title e-box">
							<button @click="saveProgress(2,form.elecGress)" style="margin: 0 20rpx;" class="mini-btn" type="primary" size="mini">保存</button>
						</view>	
					  </view>
					  <view class="title">
					  	更新记录：
					  </view>
					  <block v-for="(item,index) in eList" :key="index">
					  	<view class="h-l-time">
					  		{{item.createtime}}
					  	</view>
					  	<view class="h-l-note">
					  		{{item.remark}}
					  	</view>
					  </block>
					</view>
					<view v-show="current==2"  class="xxx">
					  <view class="uni-form-item uni-column">
						<view class="a-box">
							<textarea class="t-area" maxlength="-1"  v-model="form.remark"  placeholder="请输入组装进度"/>
						</view>
						<view class="title e-box">
							<button @click="saveProgress(3,form.remark)" style="margin: 0 20rpx;" class="mini-btn" type="primary" size="mini">保存</button>
						</view>	
					  </view>
					  <view class="title">
					  	更新记录：
					  </view>
					  <block v-for="(item,index) in rList" :key="index">
					  	<view class="h-l-time">
					  		{{item.createtime}}
					  	</view>
					  	<view class="h-l-note">
					  		{{item.remark}}
					  	</view>
					  </block>
					</view>
				</view>
			<view class="uni-btn-v">
				<!-- <button disabled class="save-btn" form-type="submit" type="primary">保存</button> -->
			</view>
		</form>
	</view>
</template>

<script>
	import aloysTab from "@/components/aloys-tab/aloys-tab.vue"
	export default {
		components: { aloysTab },
		data() {
			return {
			 tabs: [{
					title: '机构进度'
				  },{
					title: '电控进度'
				  },{
					title: '组装进度'
				  }],
				  current: 0,
				  hList:[],//历史进度记录列表
				  mList:[],//历史进度记录列表
				  eList:[],//历史进度记录列表
				  rList:[],//历史进度记录列表
				pics:["/","邓海燕","汪飞","杨平","李闯","吕斌","郑玉荣","秦茂龙","张成"],
				index: 0,
			  form:{
				  id:'',
				  name:'',
				  encoded:'',
				  customer:'',
				  
				  pic:'',
				  number:null,
				  progress:null,
				  elecPic:null,
				  mechPic:null,
				  mechGress:"",
				  elecGress:"",
				  startTime:"",
				  outTime:'',
				  endTime:"",
				  year:null,
				  remark:null,
			  },
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 3,
								maxLength: 5,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					// 对email字段进行必填验证
					email: {
						rules: [{
							format: 'email',
							errorMessage: '请输入正确的邮箱地址',
						}]
					}
				}
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.item); //打印出上个页面传递的参数。
			this.form=JSON.parse(option.item)
			this.slectTab(0)
		},
		methods: {
			onChange(index) {
			  this.current =index ;
			  this.slectTab(index)
			},
			slectTab(index){
				// console.log('到了')
				if(index==0&&this.mList.length==0){
					this.onTabChange(0)
					console.log(this.mList,888877777)
				}else if(index==1&&this.eList.length==0){
					this.onTabChange(1)
				}else if(index==2&&this.rList.length==0){
					this.onTabChange(2)
				}
			},
			updateTab(list){
				// console.log('gengx')
				if(this.current==0){
					this.mList=list
					console.log(this.mList,888)
				}else if(this.current==1){
					this.eList=list
				}else if(this.current==2){
					this.rList=list
				}
			},
			async onTabChange(index) {
			 let [err,result]=await this.$http.post("/record/listPage",{
			 	// pageSize:this.pageSize,
			 	// pageNum:this.currPage
				param:{pid:this.form.id,type:index+1}
			 })
			 let {data:res}=result
			 console.log(res.data,666)
			 if(res.code==200){
			 	// this.hList=res.data.records
				// return res.data.records
				this.updateTab(res.data.records)
			 }
			},
			async saveProgress(type,progress){
				// {
				// 	"remark":"ceshihhh222", //进度内容
				// 	"encoded":"JSP23001",//专案代码
				// 	"pid":1, //项目id
				// 	"type":1  //进度类型  点击的修改机构/电控/组装  分别对应1/2/3三种类型
				// }
				// if(!progress||progress==''){
				// 	uni.showToast({ title:"请输入内容",icon:"none"});
				// 	return
				// }
				let params={remark:progress,type:type,pid:this.form.id,encoded:this.form.encoded}
				console.log(params,999)
				// return false
				let [err,result]=await this.$http.post("/record/save",params)
				let {data:res}=result
				console.log(res,666)
				if(res.code!=200){
					uni.showToast({ title:res.msg,icon:"none"});
					return
				}
				uni.showToast({ title: '保存成功' });
				this.onTabChange(type-1)
				// this.updateTab(type-1)
				// uni.switchTab({url: '/pages/index/index'})
			},
			bindMechChange(e){
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.form.mechPic = e.detail.value
			},
			async formSubmit(e) {
				// console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				// var formdata = e.detail.value
				// uni.showModal({
				// 	content: '表单数据内容：' + JSON.stringify(formdata),
				// 	showCancel: false
				// });
				console.log(this.form,999)
				// uni.showLoading({title:""});
				let [err,result]=await this.$http.post("/project/update",this.form)
				let {data:res}=result
				console.log(res,666)
				// if (!this.$http.errorCheck(err,res)) {
				// 	// uni.hideLoading();
				// 	return
				// }
				if(res.code!=200){
					uni.showToast({ title:res.msg,icon:"none"});
					return
				}
				uni.showToast({ title: '保存成功' });
				uni.switchTab({url: '/pages/index/index'})
			},
			formReset(e) {
				console.log('清空数据')
			}
		}
	}
</script>

<style  lang="scss" scoped>
.tabs{
  width: 750rpx;
  // height: 75rpx;
  display: flex;
  .tab-item {
    flex: 1;
    text-align: center;
    color: grey;
    line-height: 73rpx;
    font-size: 32rpx;
    font-weight: 500;
    box-sizing: border-box;
    &.active{
      color: $uni-color-primary;
      border-bottom: 2rpx solid $uni-color-primary;
    }
  }
}
// .uni-row{
// 	line-height: 0.8;
// }
	.uni-form-item {
		display: flex;
	}
	.title {
		padding: 10rpx 10rpx;
		font-weight: 900;
	}
	.uni-form-item {

	}
	.uni-flex{
		align-items: center;
	}
	.a-box{
		margin: 0 10rpx;
		
	}
	.h-l-time{
		color: #cb8700;
	}
	.t-area{
		// padding: 5upx;
		// box-sizing: border-box;
		// margin: 0 10upx;
		// box-shadow:  5rpx 5px #888888 inset;
		border-radius: 5rpx;
		padding: 10rpx;
		width: 700rpx;
		height: 400rpx;
		border: 1px solid rgb(223, 223, 223);
		// border-bottom: 1px solid #26ca0d;
		// background-color: rgb(223, 223, 223);
	}
	.save-btn{
		margin: 55upx 20px;
		// margin-top: 55upx;
		// background: #4E6EF2!important;
	}
	.e-box{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
	}
	.content{
		 // height: calc(100% - 75rpx);
	}

</style>